<template>
  <div v-loading="loading">
    <SectionTitle title="调整后客户信息" style="margin-bottom: 10px;" />
    <el-form :class="{'mobile-el-form': showMobilePage}" :label-position="formAlign" class="customer-form lineHeight32" label-width="110px">
      <el-row :gutter="20" type="flex" class="response-el-row">
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="客户等级:">
            <span v-if="!detailData.levelColor">{{ detailData.customerLevel || '--' }}</span>
            <div v-else :style="{color: detailData.levelColor, background: changeColorAlphaVal(detailData.levelColor, 0.14)}" class="text-bg">{{ detailData.customerLevel || '--' }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="欠款额度(元):">
            <div class="flex-center">
              <el-tooltip v-if="detailData.oweData && (detailData.oweData.availableAmount || detailData.oweData.availableAmount === 0)" :open-delay="800" placement="top">
                <div slot="content" style="max-width:200px;" >
                  {{ (detailData.oweData.availableAmount) | moneyFilter(true, '', true) }} / {{ (detailData.oweData.totalAmount) | moneyFilter(true, '', true) }}
                </div>
                <div><span style="color: red">{{ (detailData.oweData.availableAmount) | bigDataFilter(true, '', true, 2) }}</span>/<span>{{ (detailData.oweData.totalAmount) | bigDataFilter(true, '', true, 2) }}</span></div>
              </el-tooltip>
              <span v-else>--</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="欠款账期:">
            <span>{{ detailData.loanPeriod || detailData.loanPeriod === 0 ? detailData.loanPeriod : '--' }} 天</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import SectionTitle from '@/components/Title';
import mobileCreate from '@/mixins/mobileCreate';
import { moneyFilter, bigDataFilter } from '@/filters/number';
import { mapState } from 'vuex';
import { changeColorAlphaVal } from '@/utils/tools';
export default {
  components: { SectionTitle },
  filters: { moneyFilter, bigDataFilter },
  mixins: [mobileCreate],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    changeColorAlphaVal
  }
};
</script>

<style lang="scss" scoped>
.customer-form {
  .text-bg {
    padding: 0 10px;
    border-radius: 999px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
  }
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
    .el-form-item__content {
      border-right: 1px solid #EBEEFD !important;
    }
    &:nth-child(3n) {
      .el-form-item__content {
        border-right: none !important;
      }
    }
    &:last-child {
      .el-form-item__content {
        border-right: none;
      }
    }
  }
}
.mobile-el-form {
  &::v-deep {
    .el-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
